$(document).ready(function() {
    var count = $('#carouselItemCount').val();
	
	$('div.carouselItem').wrap('<div class="outerCarouselItem"></div>');

	$('#mycarousel').jcarousel({
        vertical: true,
        scroll: 5,
		size: count,
		buttonNextCallback: function(carousel, control, flag) {
			if (flag) {
				makeButtonActive('jcarousel-next-vertical');
			} else {
				makeButtonInActive('jcarousel-next-vertical');
			}
		},
		buttonPrevCallback: function(carousel, control, flag){
			if (flag) {
				makeButtonActive('jcarousel-prev-vertical');
			} else {
				makeButtonInActive('jcarousel-prev-vertical');
			}
		}
    });
	
	function makeButtonActive(cls)
	{
		$('.' + cls).css('cursor', 'pointer').animate({
			opacity: '1.0'
		});
	}
	
	function makeButtonInActive(cls){
		$('.' + cls).css('cursor', 'default').animate({
			opacity: '0.4'
		});
	}
	
	makeButtonInActive('jcarousel-prev-vertical');
});